<template>
 
    <div class="wrap" v-if="flag">
       <div class="winodws">
           <slot name="tit"></slot>
           <slot name="content"></slot>
           <button @click="cancalfn">取消</button>
       </div>
    </div>
    <div v-else>

    </div>
      
</template>

<script>
export default {
    props:['flag'],
    methods:{
        cancalfn() {
        //  this.$parent.flag = false 尽量不要这么用
            this.$emit("event",false)
        }
    }

}
//style上的scoped style标签里写的样式只对当前组件生效，外面的不影响他，他也不影响外面的
</script>

<style scoped>
    .wrap {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, .3);
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .winodws {
        width: 80%;
        height:50%;
        background: skyblue;

    }

</style>>

